// 工作流
//   服务器内部获取数据
//   服务器内部渲染 HTML
//   客户端从远程加载代码
//   客户端开始水合
// 一切都是串行的，前一个任务没完成之前，后一任务都无法开始
// 这个操作必须是整体性的，而水合的过程可能比较慢，会引起卡顿

// @babel/register在底层改写了 node 的 require 办法，
// 在代码里引入 @babel/register模块后，所有通过require引入并且以.es6、.es、.jsx、.mjs和.js为后缀名的模块都会被 Babel 转译
const babelRegister = require('@babel/register');
babelRegister({ 
  ignore: [/node_modules/],
  presets: ["@babel/preset-react"],
  plugins: ['@babel/plugin-transform-modules-commonjs'], //转换ES模块为CommonJS
});
const webpack = require('webpack');
const express = require('express');
const static = require('serve-static');
const webpackConfig = require('./webpack.config');
const render = require('./render');
webpack(webpackConfig, (err, stats) => {
  let statsJSON = stats.toJson({ assets: true }); //获取打包后的结果
  const assets = statsJSON.assets.reduce((memo, { name }) => {
    memo[name] = `/${name}`
    return memo;
  }, {});
  const app = express();
  app.get('/', async function (req, res) {
    render(req, res, assets);
  });
  app.use(static('build'));
  app.listen(8080, () => console.log('server started on port 8080'));
});